import {
  AfterViewInit,
  Directive,
  ElementRef,
  HostListener,
  Input,
} from "@angular/core";
interface Options {
  bgColor?: string;
  hoverBgColor?:string
}
@Directive({
  selector: "[appHover]",
})
export class HoverDirective implements AfterViewInit {
  @Input("appHover") appHover: Options = {};
  element: HTMLLIElement;
  constructor(private elementRef: ElementRef) {
    this.element=this.elementRef.nativeElement
  }
  ngAfterViewInit() {
    this.element.style.backgroundColor=this.appHover.hoverBgColor||"skyblue";
  }
  @HostListener("mouseenter") enter() {
    this.element.style.backgroundColor = this.appHover.hoverBgColor||"pink";
  }
  @HostListener("mouseleave") leave() {
    this.element.style.backgroundColor = this.appHover.bgColor||"skyblue";
  }
}
